<script type='text/javascript' src='../../../content/xfusion/JSClass/FusionCharts.js'></script>
<script type='text/javascript' src='../../../content/xfusion/js/XDashFusionChartComponent.js'></script>
<script type="text/javascript" src="../../repo/files/:public:plugin-samples:fusion-charts:Dashboards:MetaLayerCharts.js"></script>

<div class="dashboardContent">
    <div id="dashboardRow1" style="position:relative; width:900px;">
        <div style="float:left; padding:10px;">
            <div style="text-align:center;font-weight:bold;">
                Line Chart
            </div>
            <div id="lineChart">
            </div>
        </div>
        <div style="float:right; padding:10px;">
            <div style="text-align:center;font-weight:bold;">
                Pie Chart
            </div>
            <div id="pieChart">
            </div>
        </div>
    </div>
    <div id="dashboardRow2" style="position:relative;width:900px;">
        <div style="float:left; padding:10px;">
            <div style="text-align:center;font-weight:bold;">
                Column Chart
            </div>
            <div id="columnChart">
            </div>
        </div>
        <div style="float:right; padding:10px;">
            <div style="text-align:center; font-weight:bold;">
                Bar Chart
            </div>
            <div id="barChart">
            </div>
        </div>
    </div>
    <div id="dashboardRow3" style="position:relative;width:900px;">
        <div style="float:left; padding:10px;">
            <div style="text-align:center;font-weight:bold;">
                Drill Bar Chart
            </div>
            <div id="drillBarChart">
            </div>
        </div>
                
        <div style="float:right; padding:10px;">
            <div style="text-align:center; font-weight:bold;">
               MS Column Chart 3D
            </div>
            <div id="msColumnChart">
            </div>
        </div>
    </div>
</div>
<script language="javascript" type="text/javascript">
    
    // Dashboard Parameters
    Dashboards.globalContext = false;

    var lineChart = {
        name: "lineChart",
        solution: "/public",
        path: "plugin-samples/fusion-charts/Fusion Charts Free/",
        action: "LineChart.xfusion",
        executeAtStart: true,
        htmlObject: "lineChart",
        chartDefinition: MetaLayerCharts.lineChartDef,
        type: "XDashFusionChartComponent",
        postExecution: function(){
        }
    }

    var pieChart = {
        name: "pieChart",
        solution: "/public",
        //used for testing old mode of referencing files
        path: "plugin-samples/fusion-charts/Fusion Charts Free",
        action: "PieChart3D.xfusion",
        executeAtStart: true,
        htmlObject: "pieChart",
        chartDefinition: MetaLayerCharts.pieChartDef,
        type: "XDashFusionChartComponent",
        postExecution: function(){
        }
    }
    

    var columnChart = {
        name: "columnChart",
        xFusionPath: "/public/plugin-samples/fusion-charts/Fusion Charts Free/ColumnChart3D.xfusion",
        executeAtStart: true,
        htmlObject: "columnChart",
        chartDefinition: MetaLayerCharts.columnChartDef,
        type: "XDashFusionChartComponent",
        postExecution: function(){
        }
    }

    var msColumnChart = {
            name: "columnChart",
            xFusionPath: "/public/plugin-samples/fusion-charts/Fusion Charts Free/MSColumnChart3D.xfusion",
            executeAtStart: true,
            htmlObject: "msColumnChart",
            chartDefinition: MetaLayerCharts.msColumnChartDef,
            type: "XDashFusionChartComponent",
            postExecution: function(){
            }
        }

    var barChart = {
            name: "barChart",
            xFusionPath: "/public/plugin-samples/fusion-charts/Fusion Charts Free/BarChart2D.xfusion",
            executeAtStart: true,
            htmlObject: "barChart",
            chartDefinition: MetaLayerCharts.barChartDef,
            type: "XDashFusionChartComponent",
            postExecution: function(){
            }
        }
    
    var drillBarChart = {
            name: "drillBarChart",
            executeAtStart: true,
            htmlObject: "drillBarChart",
            parameters: [["year","year"]],
            listeners: ["year"],
            chartDefinition: MetaLayerCharts.drillBarChartDef,
            type: "XDashFusionChartComponent",
            drillFunction:function(series,categories) {
           		this.chartDefinition.cdaDataAccessId=3;		
            	this.chartDefinition.chartLink=undefined;
            	Dashboards.fireChange("year", categories);
            }
        }
    
    function load(){

        var components = [lineChart , pieChart , columnChart,msColumnChart , barChart,drillBarChart];
        
        Dashboards.init(components);
        
    }
    load();
</script>
